<template >
    <div>
        <!--  -->
        <el-container>

            <!--头部  -->
            <el-header>
                <img src="../../public/logo.2975b4d8 (1).png" alt="">
                <h2>在线后台管理系统</h2>
            </el-header>
            <!--  -->


            <el-container>
                <!-- 侧边 -->

                <el-aside :width="isCollapse?'65px':'200px'">

                    <el-col >
                        <!-- 伸缩栏 -->
                        <p class="blue" @click="isCollapse=!isCollapse">|||</p>
                        <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#324057"
                     router  text-color="#fff" active-text-color="#ffd04b"  :collapse="isCollapse" :collapse-transition="false">
                            <el-menu-item index="welcome">
                                <i class="el-icon-s-home"></i>
                                <span slot="title">首页</span>
                            </el-menu-item>

                            <el-submenu index="">
                                <template slot="title">
                                    <i class="iconfont icon-qianbao" style="font-size: 18px;padding-right: 10px;"></i>
                                    <span>资金管理</span>
                                </template>
                                <el-menu-item index="fundlist">资金流水</el-menu-item>
                            </el-submenu>

                            <el-submenu index="">
                                <template slot="title">
                                    <i class="iconfont icon-dakaixinxi" style="font-size: 18px;padding-right: 10px;"></i>
                                    <span>信息管理</span>
                                </template>
                                <el-menu-item index="info">个人信息</el-menu-item>
                            </el-submenu>



                        </el-menu>
                    </el-col>

                </el-aside>

                <!--  -->





                <!-- 主体 -->
                <el-main>
             
                    <router-view></router-view>
                </el-main>
                <!--  -->
            </el-container>



        </el-container>



        <!--  -->
    </div>
</template>
<script>

export default {
data() {
    return {
        isCollapse:false
    }
},
}
</script>
<style lang="scss">
.el-header,
.el-footer {
    background-color: #324057;
    color: #fff;
    display: flex;
    align-items: center;

    img {
        width: 50px;
        height: 50px;
        margin-right: 18px;
    }


}

.blue {
    height: 30px;
    background-color: #66b2ff;
    text-align: center;
    cursor:pointer
}

.el-aside {
    background-color: #324057;
    color: #fff;

    height: 100vh;

}

.el-main {
    background-color: #E9EEF3;
    color: #333;
   
    height: 100vh;

}
</style>